﻿<template>
	<div class="contener"
	>
		<div class="top" style="display: flex; justify-content:flex-end ; margin: 10px 2px 15px 0px; color: beige;"><i class="el-icon-location-outline" style="margin-right: 5px;" />{{ text }}</div>
	<div class="block">
			<!-- <span >Intensity</span>
			<el-slider v-model="value1"
			:min="0"
			:max="150"
			:show-tooltip="false"
			show-input
			:step="0.01"
			@input="change1()"
			></el-slider>
			
			
			  <span class="demonstration">Zenith Color</span>
			  <el-color-picker
			  v-model="color"
			  show-alpha
			  :active-change="index()"
			  :change="change()"
			 
			  :predefine="predefineColors">
			 </el-color-picker> -->
			 
			 <el-collapse v-model="activeNames" @change="Switchfold()">
			   <el-collapse-item title="强度:Intensity" name="1">
			     <el-slider v-model="value1"
			     :min="0"
			     :max="150"
			     :show-tooltip="false"
			     show-input
			     :step="0.01"
			     @input="change1()"
			     ></el-slider>
			   </el-collapse-item>
			   <el-collapse-item title=" 顶点颜色:Zenith Color" name="2">
			     <el-color-picker
			      v-model="color"
			      show-alpha
			      @active-change="Color=>index(Color, 1)"
			      @change="Color=>change(Color, 1)"
			     
			      :predefine="predefineColors">
			     </el-color-picker>
			   </el-collapse-item>
			  
			 </el-collapse>
			<button @click="testtwo()">测试二机</button>
	</div>
	</div>
</template>

<script>
    export default {
        data() {
            return {
                activeNames: [],
                loading: true,
                value1: 0.1,
                text: '',
                ObjectPath: '',

                color: '',
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                LightColor: {
                    R: '',
                    G: '',
                    B: '',
                    A: ''
                },
                // window:window.location.href,
                upcolor: '',
                testtwo1: false

            }
        },
        watch: {
            $route() {
                if (this.$route.query.name) {
                    this.getDataList()
                    this.GetLightSource()
                    this.activeNames = []

                }
            }
        },
        mounted() {
            this.getDataList()
            this.GetLightSource()

        },
        methods: {
            testtwo() {
                this.testtwo1 = true
            },
            Switchfold() {
                if (this.activeNames != '') {
                    this.upcolor = this.color
                }

            },
            change(Color) {
                console.log(Color)
                    // var c = this.color;
                    // if(c !=null){
                    // 	var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g,'').split(',');
                    // this.LightColor.R=parseInt(rgb[0]) ;
                    // this.LightColor.G=parseInt(rgb[1]) ;
                    // this.LightColor.B=parseInt(rgb[2]) ;
                    // this.LightColor.A=parseInt(rgb[3]) ;
                    // }else{
                    // 	this.LightColor.R=1 ;
                    // 	this.LightColor.G=1 ;
                    // 	this.LightColor.B=1 ;
                    // 	this.LightColor.A=1 ;
                    // 	console.log("4444",this.LightColor)
                    // }
                if (Color == null) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": '/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
                            "access": "WRITE_TRANSACTION_ACCESS",
                            "propertyName": "LightColor",
                            "propertyValue": {
                                "LightColor": {
                                    R: 1,
                                    G: 1,
                                    B: 1,
                                    A: 1
                                }
                            }
                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then(res => {

                        console.log("3333", this.LightColor)
                    })
                }


            },
            index(color, n) {
                // console.log("?????????",color)
                if (color != '') {
                    var c = color;
                    if (c != null) {
                        var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g, '').split(',');
                        this.LightColor.R = parseInt(rgb[0]);
                        this.LightColor.G = parseInt(rgb[1]);
                        this.LightColor.B = parseInt(rgb[2]);
                        this.LightColor.A = parseInt(rgb[3]);
                    } else {
                        this.LightColor.R = 1;
                        this.LightColor.G = 1;
                        this.LightColor.B = 1;
                        this.LightColor.A = 1;
                        console.log("4444", this.LightColor)
                    }
                } else {
                    console.log("????")
                }

                // console.log("2222" , this.LightColor)
                if (this.activeNames.length > 0) {
                    if (this.testtwo1 == true) {
                        console.log("二运行了")
                        this.axios.put('/remote2/object/property', {
                                "objectPath": "/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0",
                                "access": "WRITE_TRANSACTION_ACCESS",
                                "propertyName": "LightColor",
                                "propertyValue": {
                                    "LightColor": {
                                        R: 1,
                                        G: 1,
                                        B: 1,
                                        A: 1
                                    }
                                }
                            }, {
                                headers: {
                                    'Content-Type': 'application/json'
                                }
                            }


                        ).then(res => {

                            console.log("111111", this.LightColor)
                        })
                    }
                    this.axios.put('/remote/object/property', {
                            "objectPath": '/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
                            "access": "WRITE_TRANSACTION_ACCESS",
                            "propertyName": "LightColor",
                            "propertyValue": {
                                "LightColor": {
                                    R: this.LightColor.R,
                                    G: this.LightColor.G,
                                    B: this.LightColor.B,
                                    A: this.LightColor.A
                                }
                            }
                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then(res => {
                        console.log(this.testtwo1)
                        console.log("3333", this.LightColor)
                    })



                }





            },

            change1() {
                if (this.value1 != 0.1) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": '/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
                            "access": "WRITE_TRANSACTION_ACCESS",
                            "propertyName": "Intensity",
                            "propertyValue": {
                                "Intensity": this.value1
                            }
                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then((res) => {

                        },
                        (err) => {

                        }


                    )
                }






            },

            getDataList() {
                this.text = this.$route.query.name
            },
            GetLightSource() {


                // this.text=this.$route.query.name
                this.changeData()

                this.axios.put('/remote/object/property', {
                    "ObjectPath": '/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
                    "Access": "READ_ACCESS",
                }, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {

                    let ceshi = []
                    ceshi[0] = Math.round(res.data.LightColor.R)
                    ceshi[1] = Math.round(res.data.LightColor.G)
                    ceshi[2] = Math.round(res.data.LightColor.B)
                    ceshi[3] = 1

                    let zcolor = "rgba(" + ceshi.toString() + ")"
                    this.color = zcolor;


                    this.value1 = res.data.Intensity
                    this.loading = false
                })
            }
        }
    }
</script>

<style>
    .demonstration {
        width: 100%;
    }
    
    .el-color-picker {
        width: 100%;
        margin-top: 10px;
    }
    
    .el-color-picker__trigger {
        width: 100%;
        height: 30px;
    }
    
    .block {
        width: 95%;
    }
    
    .el-collapse-item__header {
        background-color: #333A46;
        border-bottom: #333A46;
        color: #FFFFFF;
        text-align: center;
    }
    
    .el-collapse-item__content {
        background-color: #333A46;
        margin-left: 10px;
    }
    
    .el-collapse-item__wrap {
        background-color: #333A46;
    }
</style>